package com.licenta.fbApp.client;

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.Style.VerticalAlign;
import com.google.gwt.event.dom.client.MouseOutEvent;
import com.google.gwt.event.dom.client.MouseOutHandler;
import com.google.gwt.event.dom.client.MouseOverEvent;
import com.google.gwt.event.dom.client.MouseOverHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TabLayoutPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * A layout panel that may have images associated with each tab.
 * 
 * Every widget in each tab is loaded on its first selection event, if WidgetTab
 * is implemented for it.
 * 
 * @author iuliab
 * 
 */
public class ImageTabPanel extends TabLayoutPanel  {

  /**
 * Animated image for tabs: small image when out of mouse focuse / large image on mouse over or when this tab is selected.
 * @author  iuliab
 */
  public class ImageTab extends Composite {
    final HTML text;
    final Image image;
    boolean selected = false;
    final String imageUrl;
    final String smallImageUrl;
    
    public ImageTab(String text, String imageUrl, String smallImageUrl) {
      this.text = new HTML(text);
      this.text.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      this.text.setStylePrimaryName("tabLabelStyle");
      this.image = new Image(smallImageUrl);
      this.image.setSize("64px", "64px");
      this.image.setStylePrimaryName("tabImageStyle");
      this.imageUrl = imageUrl;
      this.smallImageUrl = smallImageUrl;
      
      VerticalPanel panel = new VerticalPanel();
      initWidget(panel);
      
      panel.add(image);
      panel.add(this.text);
      panel.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM);
      
      panel.addDomHandler(new MouseOverHandler() {
        
        public void onMouseOver(MouseOverEvent event) {
          if (!selected) {
            setImageSize(false);
          }
        }
      }, MouseOverEvent.getType());
      
      panel.addDomHandler(new MouseOutHandler() {
        
        public void onMouseOut(MouseOutEvent event) {
          if (!selected) {
            setImageSize(true);
          }
        }
      }, MouseOutEvent.getType());
    }
    
    /**
	 * @param selected
	 * @uml.property  name="selected"
	 */
    public void setSelected(boolean selected) {
      this.selected = selected;
      if (selected) {
        setImageSize(false);
        text.addStyleDependentName("selected");
        image.addStyleDependentName("selected");
      } else {
        setImageSize(true);
        text.removeStyleDependentName("selected");
        image.removeStyleDependentName("selected");
      }
    }
    
    private void setImageSize(boolean small) {
      if (!small) {
        image.setUrl(imageUrl);
      } else {
        image.setUrl(smallImageUrl);
      }
    }
  }
  
  /**
   * Construct new ImageTabPanel.
   */
  public ImageTabPanel() {
    super(7.5, Unit.EM);
  }
  
  
  public void add(Widget child, Widget tab) {
    super.add(child, tab);
    if (tab.getParent() instanceof SimplePanel) {
      SimplePanel sp = (SimplePanel) tab.getParent();
      sp.getElement().getStyle().setVerticalAlign(VerticalAlign.MIDDLE);
    }
  }
  
  
  public void selectTab(int index) {
    super.selectTab(index);
    selectImageTab(index);
    if (getWidget(index) instanceof LoadableTab) {
      ((LoadableTab) getWidget(index)).load();
    }
  }
  
  private void selectImageTab(int index) {
    for (int i = 0; i < getWidgetCount(); i++) {
      Widget w = getTabWidget(i);
      if (w instanceof ImageTab) {
        if (i == index) {
          ((ImageTab) w).setSelected(true);
        } else {
          ((ImageTab) w).setSelected(false);
        }
      }
    }
  }

}
